<template>
  <el-container direction="vertical">
    <el-header>
      <div>
        <img src="../assets/smell.gif" width="50px" height="50px">
        <span>欢迎登录!</span>
      </div>
      <div>
        <el-button type="primary" @click="back()">退出</el-button>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
          router
          background-color="rgb(51,55,68)"
          text-color="#fff"
          active-text-color="#409eff">
          <el-submenu index="">
            <template slot="title"><i class="el-icon-message"></i>{{ $router.options.routes[2].name }}</template>
            <el-menu-item v-for="(item,index) in $router.options.routes[2].children" :index="item.path" :class="$route.path==item.path?'is-activity':''">{{item.name}}</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "index",
  methods:{
    back(){
      this.$router.push("/");
    }
  }
}
</script>

<style scoped="scoped">
html,body,#app,.el-container{
  /*设置内部填充为0，几个布局元素之间没有间距*/
  padding: 0px;
  /*外部间距也是如此设置*/
  margin: 0px;
  /*统一设置高度为100%*/
  height: 100%;
}
.el-header {
  background: rgb(55,61,65);
  display: flex;
  justify-content: space-between;
  line-height: 60px;
  color: #fff;
  font-size: 22px;
}
.el-header img{
  vertical-align: middle;
}
.el-aside {
  background: rgb(51,55,68);
}
.el-main{
  background: rgb(234,237,241);
}
</style>
